<template>
  <div class="goodsList">
    <ul>
      <li v-for="(goods,index) in pageInfo.list" :key="index" @click="toGoodsView(goods.id)">
        <div class="pic"><el-image :src="`${SERVER_ADDR}/goods/pic/${goods.picList[0].url}`" /></div>
        <div class="name">{{ goods.name }}</div>
        <div class="dscp">{{ goods.dscp }}</div>
        <div class="price">$ {{ goods.price }}</div>
      </li>
    </ul>
    <el-row class="row-bg" justify="center" style="margin-top: 20px;">
      <el-pagination layout="prev, pager, next" :total="pageInfo.total" :page-size="pageInfo.pageSize"
                     @change="search"/>
    </el-row>
  </div>

</template>

<script setup>

//分页信息
import {ref} from "vue";
import goodsApi from "@/api/goodsApi.js";
import {useSearchStore} from "@/stores/search.js";
import {useRouter} from "vue-router";

const router = useRouter();

//服务器地址
const SERVER_ADDR = ref(import.meta.env.VITE_SERVER_ADDR)
const searchStore = useSearchStore();
//分页信息
const pageInfo = ref({
  pages: 0,
  pageSize: 0,
  pageNum: 0
});

const condition = ref({
  status: 1,
  name:searchStore.searchInfo.name
})
//搜索
function search(pageNum){

  goodsApi.selectByPage(condition.value,pageNum,20)
      .then(resp => {
        pageInfo.value = resp.data;
      })
}

//跳转到商品详情页面
function toGoodsView(id){
  router.push({
    path:'/user/goods', //跳转到的位置，值和页面路由种的配置的路径相同
    query:{
      id
    }
  });
}

search(1);
</script>

<style scoped>
.goodsList ul li{
  width: 224px;
  float: left;
  margin-right: 20px;
  text-align: center;
  background-color: #EEE;
  margin-bottom: 20px;
  margin-top: 20px;
  cursor: pointer;
}
.goodsList ul li:hover{
  box-shadow: 0px 0px 20px #000;

}
.goodsList ul li:nth-child(5n){
  margin-right: 0px;
}
.name,.dscp,.price{
  line-height: 25px;
}
.name{
  font-size: 16px;
  font-weight: bold;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>